<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
      <Table  :columns="columns" :data-source="dataSource"/>
     <dynamic-form
        :form="form"
        :configs="configs"
      >
      </dynamic-form>
  </div>
</template>

<script>
import Table from './components/Table.vue'
import DynamicForm from './components/form/Form.vue'
import {FormItemType } from './untils/constant'
export default {
  name: 'App',
  components: {
    Table,
    DynamicForm
  },
  data(){
    return {
       form: {},
      columns:[
        {
          title: 'name',
          dataIndex: 'name'
        },
        {
          title: 'age',
          dataIndex: 'age'
        },
        {
          title: 'address',
          dataIndex: 'address',
        },
        {
          title: 'operation',
          dataIndex: 'operation',
           scopedSlots: { customRender: 'operation' }
        },
      ],
      dataSource:[
        {
          key: '0',
          name: 'Edward King 0',
          age: '32',
          address: 'London, Park Lane no. 0',
        },
        {
          key: '1',
          name: 'Edward King 1',
          age: '32',
          address: 'London, Park Lane no. 1',
        },
      ],
    configs: [
        {
          label: '字段名称',
          prop: 'text',
          type: FormItemType.INPUT,
          inputType: 'text',
          placeholder: '请输入内容'
        
        },
        {
          label: '日期类型',
          prop: 'date',
          type: FormItemType.RADIO,
          className: 'name',
          valueKey: 'valueKey',
          labelKey: 'labelKey',
          dataSource: [
            { labelKey: '年-月', valueKey: '1' },
            { labelKey: '年-月-日', valueKey: '2' },
             { labelKey: '年-月-日时-分', valueKey: '3' }
          ]
        },
        {
          label: '字段类型',
          prop: 'status',
          type: FormItemType.SELECT,
          className: 'name',
          placeholder: '请选择',
          valueKey: 'valueKey',
          labelKey: 'labelKey',
          dataSource: [
            {
              valueKey: '1',
              labelKey: '日期'
            },
            {
              valueKey: '2',
              labelKey: '日历'
            }
          ]
        }

      ]
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
